{% load static %}
{% block css%}
  <link rel="stylesheet" href="{% static 'yaksh/css/dashboard.css' %}" type="text/css" />
{% endblock %}
{% block script %}
  <script src="{% static 'yaksh/js/jquery-ui.js' %}"></script>
{% endblock %}

{% load custom_filters %}
{% if error_message %}
    {% for error in error_message %}
      <div class="card ">
      <div class="card-header alert-danger">Error No. {{ forloop.counter }}</div>
      <div class="card-body ">
      <div class="">
      {% if not error.type %}
        <pre><code> {{error|safe}} </code></pre>

      {% elif error.type == 'assertion' %}

        {% if error.test_case %}
          <strong> We tried your code with the following test case:</strong>
          <br/></br>
          <pre><code><strong class="text-danger">
          {{error.test_case}}
          </strong></code></pre>
        {% endif %}
        <p> <b>The following error took place: </b></p>
        <table class="table  table-borderless border border-danger table-responsive-sm" width="100%" id='assertion'>
        <col width="30%">
            <tr class = "bg-light">
              <td><b>Exception Name: </b></td>
              <td><span class="text-danger">{{error.exception}}</span></td>
          </tr>
          <tr>
            <td><b>Exception Message: </b></td><td>{{error.message}}</td>
          </tr>
          <tr>
            {% if error.traceback %}
            <input type="hidden" id="err_lineno" value="{{error.line_no}}">
            <td><b>Full Traceback: </b></td>
            <td><pre>{{error.traceback}}</pre></td>
            {% endif %}
          </tr>
        </table>

      {% elif error.type == 'stdio' %}

        {% if error.given_input %}
         <table class="table table-borderless table-responsive-sm">
          <col width="30%">
            <tr class = "bg-light">
            <td> For given Input value(s):</td>
            <td>{{error.given_input}}</td>
            </tr>
         </table>
       {% endif %}

        <table class="table table-borderless table-responsive-sm" width="100%" id="stdio">
          <col width="10%">
          <col width="40%">
          <col width="40%">
          <col width="10%">
          <tr class="info">
          <th><center>Line No.</center></th>
          <th><center>Expected Output</center></th>
          <th><center>User output</center></th>
          <th><center>Status</center></th>
          </tr>
          {% for expected,user in error.expected_output|zip:error.user_output %}
          <td> {{forloop.counter}} </td>
          <td>{{expected|default:""|highlight_spaces|safe}} </td>
          <td>{{user|default:""|highlight_spaces|safe}}</td>
          {% if forloop.counter0 in error.error_line_numbers or not expected or not user %}
          <td><span class ="fa fa-times text-warning"/></td>
          {% else %}
          <td><span class ="fa fa-check text-success"/></td>
          {% endif %}
          </tr>
          {% endfor %}
          </table>
          <table width="100%" class="table table-borderless table-responsive-sm">
          <col width="10">
          <tr class = "bg-light">
          <td><b>Error:</b></td>
           <td>{{error.error_msg}}</td>
           </tr>
          </table>
        {% endif %}
        </div>
      </div>
      </div>
      <br>
    </div>
    {% endfor %}
{% endif %}